<template>
  <div class="options-list">
    <div class="one-cell">
      <div class="options-content bold">审批角色关系：</div>
      <el-radio-group v-model="approverDrawerData.roleRelation">
        <el-radio :label="0" style="margin-right:10px;"><span :class="{'bold': approverDrawerData.roleRelation === 0}" class="check-span">或</span></el-radio>
        <el-radio :label="1"><span :class="{'bold': approverDrawerData.roleRelation === 1}" class="check-span">且</span></el-radio>
      </el-radio-group>
    </div>
    <div class="check-group">
      <el-checkbox :disabled="includeCreateNo || includeAutoPay" v-model="approverDrawerData.isRequire" :true-label="1" :false-label="0" class="check-item" @change="uniqueChange($event, 'isCountersign', approverDrawerData)"><span class="check-span">人员必填</span></el-checkbox>
      <el-checkbox :disabled="includeCreateNo || includeAutoPay" v-model="approverDrawerData.isCountersign" :true-label="1" :false-label="0" class="check-item" @change="handelChangeCountersign($event, approverDrawerData)"><span class="check-span">设置为加签</span></el-checkbox>
      <el-checkbox v-model="approverDrawerData.isRichText" :true-label="1" :false-label="0" class="check-item"><span class="check-span">审批意见使用富文本</span></el-checkbox>
    </div>
    <div class="check-group">
      <!-- 禁止撤销规则：只允许一个节点开启禁止撤销 v-if="!cacheRepealLockId || cacheRepealLockId === (approverDrawerData.id || approverDrawerData._id)"-->
      <el-checkbox v-model="approverDrawerData.isRepealLock" :true-label="1" :false-label="0" class="check-item"><span class="check-span">禁止作废</span></el-checkbox>
      <el-checkbox v-model="approverDrawerData.isRecall" :true-label="1" :false-label="0" class="check-item"><span class="check-span">禁止撤回</span></el-checkbox>
      <el-checkbox v-model="approverDrawerData.isRestrictAutoApprove" :true-label="1" :false-label="0" class="check-item"><span class="check-span">禁止去重</span></el-checkbox>
    </div>
    <div class="check-group">
      <el-checkbox v-model="approverDrawerData.canModifyForm" :true-label="1" :false-label="0" class="check-item"><span class="check-span">允许审批人修改表单</span></el-checkbox>
      <!-- 只有第一个节点有创建人自动通过选项 -->
      <el-checkbox v-if="approverDrawerData.id === processList.childNode.id" v-model="approverDrawerData.creatorAutoPass" :true-label="1" :false-label="0" class="check-item"><span class="check-span">创建人自动通过</span></el-checkbox>
      <el-checkbox v-model="approverDrawerData.isPassedRequired" :true-label="1" :false-label="0" class="check-item"><span class="check-span">通过时意见必填</span></el-checkbox>
    </div>
    <div class="check-group">
      <el-checkbox v-model="approverDrawerData.isRejectRequired" :true-label="1" :false-label="0" class="check-item"><span class="check-span">未通过时意见必填</span></el-checkbox>
      <el-checkbox v-model="approverDrawerData.allowCloseProcess" :true-label="1" :false-label="0" class="check-item"><span class="check-span">允许结束流程</span></el-checkbox>
    </div>
  </div>
</template>

<script>
import ElMessage from '@/utils/message';
export default {
  props: {
    approverDrawerData: {
      type: Object,
      default: () => ({})
    },
    processList: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    includeCreateNo() { // 是否选中节点之后生成归档编号
      const { setEvents } = this.approverDrawerData;
      if (!setEvents || !Array.isArray(setEvents) || !setEvents.length) return false;
      return setEvents.includes(3);
    },
    includeAutoPay() { // 是否选中自动确认付款事件
      const { setEvents } = this.approverDrawerData;
      if (!setEvents || !Array.isArray(setEvents) || !setEvents.length) return false;
      return setEvents.includes(5);
    }
  },
  methods: {
    handleRepealLock(value) {
      if (value) {
        const eventNode = this.hasRepealLock(this.approverDrawerData);
        if (eventNode.num >= 2) {
          ElMessage.error(`${eventNode.node ? '节点' + eventNode.node.nodeName : '其他节点'}已开启禁止作废，无法重复开启`);
          this.$set(this.approverDrawerData, 'isRepealLock', 0);
        }
      }
    },
    uniqueChange(value, filed, item) {
      if (value) {
        this.$set(item, filed, 0);
      } else {
        return;
      }
    },
    handelChangeCountersign(value, item) {
      this.uniqueChange(value, 'isRequire', item);
      // 设置为加签后不能选中 节点之后生成归档编号（id:3） 事件
      if (value && item.setEvents && item.setEvents.includes(3)) {
        item.setEvents.splice(item.setEvents.indexOf(3), 1);
      }
    },
    // 递归
    hasRepealLock(item) {
      let ans = 0;
      let node = null;
      const dfs = (curNode) => {
        if (!curNode || this.isEmpty(curNode)) return;
        if (curNode.isRepealLock) {
          const curNodeId = curNode.id || curNode._id;
          const treeId = item.id || item._id;
          if (curNodeId !== treeId) node = curNode;
          ans++;
        }
        if (!this.isEmpty(curNode.childNode)) {
          dfs(curNode.childNode);
        }
        if (curNode.conditionNodes && curNode.conditionNodes.length) {
          for (let i = 0; i < curNode.conditionNodes.length; i++) {
            dfs(curNode.conditionNodes[i]);
          }
        }
      };
      dfs(this.processList);
      return { node, num: ans };
    },
    isEmpty(obj) {
      if (!obj) return false;
      return Object.keys(obj).length <= 0;
    }
  }
};
</script>

<style lang="scss" scoped>
.options-list {
  margin-top: 24px;
  .bold {
    font-weight: bold;
  }
}
.one-cell {
  display: flex;
  align-items: center;
}
.check-group {
  margin-top: 16px;
  display: flex;
  align-items: center;
  .check-item {
    display: flex;
    align-items: center;
    width: 160px;
    margin-right: 12px;
  }
}
.options-content {
  font-size: 14px;
  text-align: left;
  color: #333333;
  line-height: 1.5;
}
.check-span {
  color: #666;
  font-size: 14px;
}
</style>
